import L from "leaflet";
import "leaflet-polylinedecorator";
import "leaflet-rotatedmarker";
import {
  nav,
  doorFrame,
  begin,
  end,
} from "@/assets/img.js";

class AntPathPolyline {
  static color = [
    "#006600",
    "#0000cc",
    "#e62f00",
    "#8600b3",
    "#b35900",
    "#ff9900",
    "#00b2b3",
    "#000000",
    "#006699",
    "#cc0099",
    "#B0E0E6",
    "#4169E1",
    "#6A5ACD",
    "#87CEEB",
    "#00FFFF",
    "#385E0F",
    "#082E54",
    "#7FFFD4",
    "#40E0D0",
    "#00FF00",
    "#7FFF00",
    "#00C957",
    "#BDFCC9",
    "#6B8E23",
    "#2E8B57",
    "#A020F0",
    "#8A2BE2",
    "#DA70D6",
    "#DDA0DD",
    "#33A1C9",
    "#191970",
    "#0B1746",
    "#1E90FF",
    "#3D59AB",
    "#D2B48C",
    "#F4A460",
    "#8B4513",
    "#A0522D",
    "#5E2612",
    "#734A12",
    "#808A87",
    "#708069",
    "#808069",
    "#9C661F",
    "#B03060",
    "#FF4500",
    "#FF9912",
    "#E3A869",
    "#D2691E",
    "#FF7D40",
    "#BC8F8F",
    "#03A89E",
    "#A39480"
  ];

  drawPolyline(map, personTrack, layerGroup, personIndex, polylineStyleIndex) {
    if (!personTrack) return false;
    const points = [];
    const pointInfo = [];
    for (let i = 0; i <= personTrack["trackList"].length - 1; i++) {
      if (
        personTrack["trackList"][i]["matchLatitude"] &&
        personTrack["trackList"][i]["matchLongitude"]
      ) {
        const lat = personTrack["trackList"][i]["matchLatitude"];
        const lon = personTrack["trackList"][i]["matchLongitude"];
        points.push([lat, lon]);
        pointInfo.push({
          matchDevicePosition:
            personTrack["trackList"][i]["matchDevicePosition"],
          matchShotTime: personTrack["trackList"][i]["matchShotTime"],
        });
      }
    }

    console.log("points.length:");
    console.log(points.length);
    console.log("pointInfo");
    console.log(pointInfo);

    if (points.length === 0) return false;

    // 第一个点
    const firstMarker = L.marker(points[0], {
      icon: L.icon({
        iconUrl: begin, // 图标图片的URL
        iconSize: [32, 32], // 图标的大小
        iconAnchor: [12, 30], // 图标的锚点，即图标的位置应该放置在地图上的位置
        popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
      }),
    })
      .addTo(layerGroup)
      .bindTooltip(
        `<div class="leaflet-popup-content-div"><b>姓名：</b>${personTrack["personName"]}</div>
            <div class="leaflet-popup-content-div"><b>拍摄地点：</b>${pointInfo[0]["matchDevicePosition"]}</div>
            <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${pointInfo[0]["matchShotTime"]}</div>
            <div class="leaflet-popup-content-div"><b>经度：</b>${points[0][0]}</div>
            <div class="leaflet-popup-content-div"><b>纬度：</b>${points[0][1]}</div>
            `,
        {
          permanent: false,
          direction: "top",
          offset: [4, -30],
        }
      );

    firstMarker.setZIndexOffset(1000);

    map.on("zoomend", function () {
      const newLatLng = firstMarker.getLatLng(); // 获取当前标记的位置
      firstMarker.setLatLng(newLatLng); // 重设标记的位置
    });

    // 中间点
    for (let i = 1; i <= points.length - 2; i++) {
      const marker = L.marker(points[i], {
        icon: L.icon({
          iconUrl: doorFrame, // 图标图片的URL
          iconSize: [18, 18], // 图标的大小
          iconAnchor: [10, 18], // 图标的锚点，即图标的位置应该放置在地图上的位置
          popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
        }),
      })
        .addTo(layerGroup)
        .bindTooltip(
          `<div class="leaflet-popup-content-div"><b>姓名：</b>${personTrack["personName"]}</div>
              <div class="leaflet-popup-content-div"><b>拍摄位置：</b>${pointInfo[i]["matchDevicePosition"]}</div>
              <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${pointInfo[i]["matchShotTime"]}</div>
              <div class="leaflet-popup-content-div"><b>经度：</b>${points[i][1]}</div>
              <div class="leaflet-popup-content-div"><b>纬度：</b>${points[i][0]}</div>
              `,
          {
            permanent: false,
            direction: "top",
            offset: [-1, -15],
          }
        )
        .on("click", function () {
          marker.openPopup();
        });

      // 地图缩放时避免图标错位
      map.on("zoomend", function () {
        const newLatLng = marker.getLatLng(); // 获取当前标记的位置
        marker.setLatLng(newLatLng); // 重设标记的位置
      });
    }

    const polyline = L.polyline(points, { weight: 6, color: "#459c50" }).addTo(
      layerGroup
    );
    L.polylineDecorator(polyline, {
      patterns: [
        {
          offset: 30, // 箭头起始位置距离线条两端的距离
          repeat: 40, // 箭头重复的间隔
          symbol: L.Symbol.arrowHead({
            pixelSize: 3, // 箭头大小
            headAngle: 90, // 角度
            polygon: false,
            pathOptions: { stroke: true, weight: 2, color: "#fff" },
          }),
        },
      ],
    }).addTo(layerGroup);

    // 最新的点
    const len = points.length;
    const endMarker = L.marker(points[len - 1], {
      icon: L.icon({
        iconUrl: end, // 图标图片的URL
        iconSize: [32, 32], // 图标的大小
        iconAnchor: [12, 30], // 图标的锚点，即图标的位置应该放置在地图上的位置
        popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
      }),
    })
      .addTo(layerGroup)
      .bindTooltip(
        `<div class="leaflet-popup-content-div"><b>姓名：</b>${
          personTrack["personName"]
        }</div>
        <div class="leaflet-popup-content-div"><b>拍摄地点：</b>${
          pointInfo[len - 1]["matchDevicePosition"]
        }</div>
        <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${
          pointInfo[len - 1]["matchShotTime"]
        }</div>
        <div class="leaflet-popup-content-div"><b>经度：</b>${
          points[len - 1][0]
        }</div>
        <div class="leaflet-popup-content-div"><b>纬度：</b>${
          points[len - 1][1]
        }</div>
        `,
        {
          permanent: false,
          direction: "top",
          offset: [4, -30],
        }
      );

    endMarker.setZIndexOffset(1000);

    map.on("zoomend", function () {
      const newLatLng = endMarker.getLatLng(); // 获取当前标记的位置
      endMarker.setLatLng(newLatLng); // 重设标记的位置
    });

    map.setView(points[len - 1], 12);
  }

  drawAllPoints(map, personTrack, layerGroup, personIndex, polylineStyleIndex) {
    if (map) {
      if (!personTrack) return false;

      const points = [];
      const pointInfo = [];
      for (let i = 0; i <= personTrack["trackList"].length - 1; i++) {
        if (
          personTrack["trackList"][i]["matchLatitude"] &&
          personTrack["trackList"][i]["matchLongitude"]
        ) {
          const lat = personTrack["trackList"][i]["matchLatitude"];
          const lon = personTrack["trackList"][i]["matchLongitude"];
          points.push([lat, lon]);
          pointInfo.push({
            matchDevicePosition:
              personTrack["trackList"][i]["matchDevicePosition"],
            matchShotTime: personTrack["trackList"][i]["matchShotTime"],
          });
        }
      }

      if (points.length === 0) return false;

      for (let i = 0; i <= points.length - 2; i++) {
        const marker = L.circle(points[i], {
          color: AntPathPolyline.color[personIndex],
          fillColor: AntPathPolyline.color[personIndex],
          fillOpacity: 1,
          radius: 5,
        })
          .addTo(layerGroup)
          .bindTooltip(
            `<div class="leaflet-popup-content-div"><b>姓名：</b>${personTrack["personName"]}</div>
              <div class="leaflet-popup-content-div"><b>拍摄位置：</b>${pointInfo[i]["matchDevicePosition"]}</div>
              <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${pointInfo[i]["matchShotTime"]}</div>
              <div class="leaflet-popup-content-div"><b>经度：</b>${points[i][1]}</div>
              <div class="leaflet-popup-content-div"><b>纬度：</b>${points[i][0]}</div>
              `,
            {
              permanent: false,
              direction: "top",
              offset: [0, -8],
            }
          )
          .on("click", function () {
            marker.openPopup();
          });
      }

      // 最新的点
      const len = points.length;
      // https://www.cnblogs.com/z-sm/p/5083600.html
      const endMarker = L.marker(points[len - 1], {
        icon: L.divIcon({
          className: "custom-div-icon",
          html: `<div style="background: ${AntPathPolyline.color[personIndex]};"><span>${personTrack["personName"]}</span></div>`,
          iconSize: [48, 50], // 这将是图标的大小，对应于像素
        }),
      })
        .addTo(layerGroup)
        .bindTooltip(
          `<div class="leaflet-popup-content-div"><b>姓名：</b>${
            personTrack["personName"]
          }</div>
        <div class="leaflet-popup-content-div"><b>拍摄地点：</b>${
          pointInfo[len - 1]["matchDevicePosition"]
        }</div>
        <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${
          pointInfo[len - 1]["matchShotTime"]
        }</div>
        <div class="leaflet-popup-content-div"><b>经度：</b>${
          points[len - 1][0]
        }</div>
        <div class="leaflet-popup-content-div"><b>纬度：</b>${
          points[len - 1][1]
        }</div>
        `,
          {
            permanent: false,
            direction: "top",
            offset: [0, -25],
          }
        );

      endMarker.setZIndexOffset(1000);

      map.on("zoomend", function () {
        const newLatLng = endMarker.getLatLng(); // 获取当前标记的位置
        endMarker.setLatLng(newLatLng); // 重设标记的位置
      });
    } else {
      console.log("地图实例不存在");
    }
  }

  drawPoint(
    map,
    point,
    personName,
    matchDevicePosition,
    matchShotTime,
    layerGroup
  ) {
    if (point.length === 0) {
      return;
    }

    const marker = L.marker(point, {
      icon: L.icon({
        iconUrl: nav, // 图标图片的URL
        iconSize: [24, 24], // 图标的大小
        iconAnchor: [10, 20], // 图标的锚点，即图标的位置应该放置在地图上的位置
        popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
      }),
    })
      .addTo(layerGroup)
      .bindTooltip(
        `<div class="leaflet-popup-content-div"><b>姓名：</b>${personName}</div>
        <div class="leaflet-popup-content-div"><b>拍摄位置：</b>${matchDevicePosition}</div>
        <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${matchShotTime}</div>
        <div class="leaflet-popup-content-div"><b>经度：</b>${point[0]}</div>
        <div class="leaflet-popup-content-div"><b>纬度：</b>${point[1]}</div>
        `,
        {
          permanent: false,
          direction: "top",
          offset: [1, -22],
        }
      )
      .on("click", function () {
        marker.openPopup();
      });

    // 地图缩放时避免图标错位
    map.on("zoomend", function () {
      const newLatLng = marker.getLatLng(); // 获取当前标记的位置
      marker.setLatLng(newLatLng); // 重设标记的位置
    });

    map.setView(point, 12);
  }
}

export default AntPathPolyline;
